﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <title></title>
</head>
<body onload="initialize()">
<script type="text/javascript">
    var map;
    var markersArray = [];
    function initialize() {
        var haightAshbury = new google.maps.LatLng(37.7699298, -122.4469157);
        var mapOptions = {
            zoom: 12,
            center: haightAshbury,
            mapTypeId: google.maps.MapTypeId.TERRAIN
        };
        map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
        google.maps.event.addListener(map, 'click', function (event) {
            addMarker(event.latLng);
        });
    }
    function addMarker(location) {
        marker = new google.maps.Marker({
            position: location,
            map: map
        });
        markersArray.push(marker);
    }
    // Removes the overlays from the map, but keeps them in the array
    function clearOverlays() {
        if (markersArray) {
            for (i in markersArray) {
                markersArray[i].setMap(null);
            }
        }
    }
    // Shows any overlays currently in the array
    function showOverlays() {
        if (markersArray) {
            for (i in markersArray) {
                markersArray[i].setMap(map);
            }
        }
    }
    // Deletes all markers in the array by removing references to them
    function deleteOverlays() {
        if (markersArray) {
            for (i in markersArray) {
                markersArray[i].setMap(null);
            }
            markersArray.length = 0;
        }
    } 
</script>
<div id="map_canvas" style="width: 300px; height: 300px">
</div>
</div>
</body>
</html>
